<template>
	<view class="tabbar">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="changeTab(index)"> <template
				v-if="index != 2">
				<view class="select" v-if="current == index">
					<view>
						<view class="i-t position">
							<image class="img imgactive" mode="widthFix" :src="item.selectedIconPath"
								v-if="current == index"> </image>
							<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
							<view class="text active" v-if="current == index">{{ item.text }}</view>
							<view class="text" v-else>{{ item.text }}</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="i-t">
						<image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image>
						<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
						<view class="text active" v-if="current == index">{{ item.text }}</view>
						<view class="text" v-else>{{ item.text }}</view>
					</view>
				</view>
			</template> <!-- 下面是为了解决自定义业务需求，如果is_identity = 3则显示中间的加号，不然显示服务商 --> <template v-else>
				<view class="i-t" v-if="is_identity == 3">
					<image class="img" mode="widthFix" :src="urladdTask"
						style="width: 140rpx;height: 140rpx;position: absolute;top: -50rpx;"></image>
				</view>
				<view class="i-t" v-else>
					<view class="select" v-if="current == index">
						<view>
							<view class="i-t position">
								<image class="img imgactive" mode="widthFix" :src="item.selectedIconPath"
									v-if="current == index"> </image>
								<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
								<view class="text active" v-if="current == index">{{ item.text }}</view>
								<view class="text" v-else>{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="i-t">
							<image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index">
							</image>
							<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
							<view class="text active" v-if="current == index">{{ item.text }}</view>
							<view class="text" v-else>{{ item.text }}</view>
						</view>
					</view>
				</view>
			</template> </view>
	</view>
</template>
<script>
	//引入图片资源
	import addTask from '../static/tabbar/publish.png'
	export default {
		name: "tabbar",
		props: ['current'],
		data() {
			return {
				urladdTask: addTask,
				is_identity: 0, // TODO: 下面list则是你页面上具体展示的底部按钮，根据你的需求和页面进行调整			
				list: [{
						"pagePath": "pages/index/index",
						"text": "首页",
						"iconPath": "static/tabbar/home.png",
						"selectedIconPath": "../static/tabbar/home-active.png"
					},
					{
						"pagePath": "pages/discover/index",
						"text": "发现",
						"iconPath": "../static/tabbar/discover.png",
						"selectedIconPath": "../static/tabbar/discover-active.png"
					},
					{
						"pagePath": "pages/publish/index",
						"text": "发布",
						"iconPath": "../static/tabbar/publish.png",
						"selectedIconPath": "../static/tabbar/publish-active.png"
					},
					{
						"pagePath": "pages/message/index",
						"text": "消息",
						"iconPath": "../static/tabbar/message.png",
						"selectedIconPath": "../static/tabbar/message-active.png"
					},
					{
						"pagePath": "pages/profile/index",
						"text": "我的",
						"iconPath": "../static/tabbar/profile.png",
						"selectedIconPath": "../static/tabbar/profile-active.png"
					}
				]
			}
		},
		created() {
			//隐藏tabbar		
			uni.hideTabBar();
		},
		mounted() {},
		methods: {
			changeTab(e) {
				uni.switchTab({
					url: '/' + this.list[e].pagePath,
				})
			}
		}
	}
</script>
<style>
	.tabbar {
		font-size: 1.5vh;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		height: 6vh;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.tabbar-item {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.img {
		height: 3vh;
		width: 2.5vh;
	}

	.text {
		text-align: center;
		color: #CACACA;
	}

	.i-t {
		display: flex;
		flex-direction: column;
		justify-items: center;
		align-items: center;
	}

	.select {
		position: relative;
	}

	.text.active {
		color: red;
	}

	.index0 {
		width: 80rpx;
		height: 80rpx;
	}
</style>